<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery添加节点操作</title>
    <style>

    </style>
</head>
<body>
    <button>添加按钮</button>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
    </ul>

    <script src="./js/jquery-1.12.4.js"></script>
    <script>
      $(function(){
          //1.创建一个li节点
          var $li = $('<li>这是新建的li</li>')
          //2.添加一个li节点
          //2.1绑定添加按钮的单击事件
          $('button').click(function(){
            //内部添加
            //   append方法会将新节点添加在指定元素最后面
            //   $('ul').append($li);
            //   使用appendTo方法添加
            //   $li.appendTo('ul')
            //  prepend方法会将新节点添加在指定元素最前面
                // $('ul').prepend($li);
            //  prependTo方法会将新节点添加在指定元素最前面
                // $li.prependTo('ul');
            //外部添加
                // after方法会将新节点添加在ul之外的后面
                // $('ul').after($li)
                // 使用insertAfter方法会将新节点添加在ul之外的前面
                // $li.insertAfter('ul')
                // 使用before方法会将新节点添加在ul之外的前面，与insertAfter效果相同
                // $('ul').before($li)
                // 使用insertBefore方法会将新节点添加在ul之外的后面，与after效果相同
                // $li.insertBefore('ul')
          })
      })
    </script>
</body>
</html>